<!-- 首页文章展示盒子 -->
<template>
  <div class="home-article-box-wrap">
    <img :src="image" alt="" />
    <div class="title">hello world</div>
  </div>
</template>

<script>
export default {
  name: "HomeArticleBox",
  props: {
    image: {
      type: String,
      default: "",
    },
  },
  setup() {
    return {};
  },
};
</script>
<style lang='less' scoped>
.home-article-box-wrap {
  position: relative;
  width: 290px;
  height: 190px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px 0 rgba(24, 24, 24, 0.2);
  transition: all 0.2s ease-out;
  img {
    width: 100%;
    height: 100%;
  }
  .title {
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.home-article-box-wrap:hover {
  transform: translate(-2px, -3px);
  box-shadow: 6px 6px 4px #888888 ;
}
</style>